<!DOCTYPE html>
<html>
<head>
    <include file="Public:header" />
    <!-- jqgrid-->
    <link href="__ACSS__/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
    	<input type="hidden" value="<{$vo.id}>" id="id"/>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox ">
                    <div class="ibox-content">
                    	<div class="ibox-selected-search-box">
                    		<h3><font style="color:#ff5500">“<{$vo.title}>”</font> 已添加产品列表</h3>
                    	</div>
						<div class="ibox-selected-search-box" style="border-bottom:0; margin:0; padding:0">
							<div class="row">
								<div class="infont col-md-2">
									<button type="button" id="del" class="btn btn-white btn-sm btn-outline"><i class="fa fa-trash-o"></i>&nbsp;删除</button>
								</div>
								<div class="infont col-md-4">
									<input type="text" name="name" class="form-control" placeholder="产品名">
								</div>
								<div class="infont col-md-2">
									<button class="btn btn-success btn-block btn-ibox-selected-search" type="button">搜索</button>
								</div>
							</div>
						</div>


                        <div class="jqGrid_wrapper">
                            <table id="table_list"></table>
                            <div id="pager_list"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox ">
                    <div class="ibox-content">
                    	<div class="ibox-search-box">
                    		<h3>所有产品列表</h3>
                    	</div>
                    	<div class="ibox-search-box" style="border-bottom:0; margin:0; padding:0">
                    		<div class="row">
	                    		<div class="infont col-md-4">
		                    		<input type="text" name="name" class="form-control" placeholder="产品名">
								</div>
								<div class="infont col-md-4">
									<select name="type_id" class="form-control" placeholder="类型">
										<option value="0">请选择</option>
										<foreach name="types" item="types">
											<option value="<{$types.id}>"><{$types.name}></option>
										</foreach>
									</select>
								</div>
	                    		<div class="infont col-md-4">
	                    			<button class="btn btn-success btn-block btn-ibox-search" type="button">搜索</button>
	                    		</div>
                    		</div>
                    	</div>
                        <div class="jqGrid_wrapper">
                            <table id="table_list2"></table>
                            <div id="pager_list2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 全局js -->
<include file="Public:foot" />
<!-- jqGrid -->
<script src="__AJSPLUGINS__/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__AJSPLUGINS__/jqgrid/jquery.jqGrid.min.js?0820"></script>
<!-- Page-Level Scripts -->
<script>
$(document).ready(function () {
	//初始化
    $.jgrid.defaults.styleUI = 'Bootstrap';
    $("#table_list").jqGrid({
    	url : '__URL__/getShopProductData?id=<{$vo.id}>',
    	datatype: "json",
        height: 380,
        autowidth: true,
        shrinkToFit: true,
		multiselect:true,
        rowNum: 10,
        rowList: [10, 15, 30, 50],
        colNames: ['ID', '产品名称','库存','规格库存','更新'],
        colModel: [{name : 'id',index : 'id'},
                    {name : 'name',index : 'name'},
					{name : 'num',index : 'num',formatter:function(cellvalue, options, rowObject){
						if(rowObject.attribute_values.length!=0){
							var attribute_values = rowObject.attribute_values;
							var num = 0;
							for(var i in attribute_values){
								num = num*1+attribute_values[i]['num']*1;

							}
							var content = '<span>'+ num+'</span>';
						}else{
							var content = '<input type="text" id="num_value_'+rowObject.id+'" value="'+ rowObject.num+'" size="5px;">';
						}

						return content;

					}},
					{name : 'attribute',index : 'is_attr',formatter:function(cellvalue, options, rowObject){
						var attribute_values = rowObject.attribute_values;
						var content = "";
						for(var i in attribute_values){
							content += attribute_values[i]['attr_value_name']+':<input type="text" class="attr_num" attr_id="'+attribute_values[i]['id']+'" id="attr_num_value_'+attribute_values[i]['id']+'" value="'+ attribute_values[i]['num']+'" size="5px;"><br>';

						}
						return content;
					}},
					{name : 'update',index : 'update',formatter : function(cellvalue, options, rowObject){
						content = '<button class="btn btn-white btn-xs btn-outline" onclick="updatenum('+ rowObject.id +')">更新库存</button>';
						return content;
					}}
                  ],
        pager: "#pager_list",
        viewrecords: true,
        hidegrid: false,
        sortname: "seq",
        sortorder: "desc"
    });
 	// 设置按钮
    $("#table_list").jqGrid('navGrid', '#pager_list', {
        edit: false,
        add: false,
        del: false,
        search: false
    }, {
        height: 200,
        reloadAfterSubmit: true
    });
 	// 添加适配响应
    $(window).bind('resize', function () {
        var width = $('.jqGrid_wrapper').width();
        $('#table_list').setGridWidth(width);
    });
 	
 
    //产品列表
    $("#table_list2").jqGrid({
    	url : '__URL__/getProductAllData',
    	datatype: "json",
        height: 380,
        autowidth: true,
        shrinkToFit: true,
        rowNum: 10,
        rowList: [10, 15, 30, 50],
        colNames: ['产品名称', '类别', '操作'],
        colModel: [ {name : 'name',index : 'name'},
                    {name : 'type_name',index : 'type_name'},
                    {name : 'id',index : 'id',formatter : function(cellvalue, options, rowObject){
                    	content = '<button class="btn btn-white btn-xs btn-outline" onclick="addToList('+ cellvalue +')"><i class="fa fa-a"></i>  添加至列表</button>';
                   	 	return content;
              	 	}}
                  ],
        pager: "#pager_list2",
        viewrecords: true,
        hidegrid: false,
        sortname: "seq"
    });
  //搜索
    $(".btn-ibox-search").click(function() {
    	result = getSearchParamByInput();
    	$("#table_list2").jqGrid('setGridParam', { 
    		page: 1,
    		url : '__URL__/getProductAllData' + result
    	}).trigger("reloadGrid");
    })
	//已选择商品搜索
	$(".btn-ibox-selected-search").click(function() {
		result = getSelectedSearchParamByInput();
		$("#table_list").jqGrid('setGridParam', {
			page: 1,
			url : '__URL__/getShopProductData?id=<{$vo.id}>' + result
		}).trigger("reloadGrid");
	})
    //监控回车
    $(".ibox-search-box").find(":input").keydown(function(event) {
		if(event.keyCode == 13){
			$(".btn-ibox-search").trigger("click");
		}
	})

	//已选择监控回车
	$(".ibox-selected-search-box").find(":input").keydown(function(event) {
		if(event.keyCode == 13){
			$(".btn-ibox-selected-search").trigger("click");
		}
	})
    
    //获取搜索条件（仅限封装简单条件）
    function getSearchParamByInput() {
    	var result = "";
    	$(".ibox-search-box").find(":input").each(function() {
    		if($(this).val() != "") {
    			if(result != "") {
    				result += "&";
    			}else{
    				result += "?";
    			}
    			result += $(this).attr("name") + "=" + $(this).val();
    		}
    	})
    	return result;
    }

	//获取已选择产品搜索条件（仅限封装简单条件）
	function getSelectedSearchParamByInput() {
		var result = "";
		$(".ibox-selected-search-box").find(":input").each(function() {
			if($(this).val() != "") {
				if(result != "") {
					result += "&";
				}else{
					result += "&";
				}
				result += $(this).attr("name") + "=" + $(this).val();
			}
		})
		return result;
	}
	
 	// 设置按钮
    $("#table_list2").jqGrid('navGrid', '#pager_list2', {
        edit: false,
        add: false,
        del: false,
        search: false
    }, {
        height: 200,
        reloadAfterSubmit: true
    });
    // 添加适配响应
    $(window).bind('resize', function () {
        var width = $('.jqGrid_wrapper').width();
        $('#table_list2').setGridWidth(width);
    });
    
  	//删除
	$("#del").click(function() {
		var id = $("#table_list").jqGrid('getGridParam','selarrrow');
    	if(id != null) {
    		layer.confirm('确定执行？', function(index){
        		$.ajax({
        			url:"__URL__/del_shop_product",
        			type:"post",
        			data:{'id':id},
        			success:function(json){
        				var data = eval("("+json+")");
        				if(data.status == 1){
        					layer.msg(data.info);
        					$('#table_list').trigger("reloadGrid");
        				}else{
        					layer.msg(data.info);
        				}
        			}
        		})
        	    layer.close(index);
        	});
    	}else {
    		layer.msg("您没有选取数据！");
    	}
	})
});
//添加至列表
function addToList(id){
	$.ajax({
		url:"__URL__/addToList",
		type:"post",
		data:{'product_id':id,'shop_id':$("#id").val()},
		success:function(json){
			var data = eval("("+json+")");
			if(data.status == 1){
				layer.msg(data.info, {time: 1000});
			}else{
				layer.msg(data.info, {time: 1000});
				$('#table_list').trigger("reloadGrid");
			}
			$('#table_list').trigger("reloadGrid");
		}
	})
}
//更新库存
function updatenum(id){

	if($("#table_list").find("#"+id).find(".attr_num").length!=0){
		var attr_num_arr = new Array();
		$("#table_list").find("#"+id).find(".attr_num").each(function(){
			var attr_id = $(this).attr("attr_id");
			var attr_num = $(this).val();
			attr_num_arr.push(attr_id+":"+attr_num);
		});
		var data = {'id':id,'attr_num':attr_num_arr};
		$.ajax({
			url:"__URL__/updateattrnum",
			type:"post",
			data:data,
			success:function(json){
				var data = eval("("+json+")");
				if(data.status == 1){
					layer.msg(data.info, {time: 1000});
				}else{
					layer.msg(data.info, {time: 1000});
					$('#table_list').trigger("reloadGrid");
				}
				$('#table_list').trigger("reloadGrid");
			}
		})
	}else{
		 var data = {'id':id,'num':$("#num_value_"+id).val()};
		 $.ajax({
		 url:"__URL__/updatenum",
		 type:"post",
		 data:data,
		 success:function(json){
		 var data = eval("("+json+")");
		 if(data.status == 1){
		 layer.msg(data.info, {time: 1000});
		 }else{
		 layer.msg(data.info, {time: 1000});
		 $('#table_list').trigger("reloadGrid");
		 }
		 $('#table_list').trigger("reloadGrid");
		 }
		 })
	}

}
</script>
</html>